﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo02"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" x:Name="page"
    x:Class="Demo02.MainPage"
    mc:Ignorable="d">

    <Page.DataContext>
        <local:MainPageViewModel/>
    </Page.DataContext>

    <Interactivity:Interaction.Behaviors>
        <local:ResponsiveBehavior LandscapeState="LandscapeVisualState" NarrowState="NarrowVisualState" PortraitState="PortraitVisualState"/>
    </Interactivity:Interaction.Behaviors>

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="OrientationStateGroup">
				<VisualState x:Name="LandscapeVisualState"/>
				<VisualState x:Name="PortraitVisualState" >
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridPortrait">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridLandscape">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="NarrowVisualState" >
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridLandscape">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridPortrait">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridNarrow">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
			<VisualStateGroup x:Name="NarrowVisualGroup">
				<VisualState x:Name="Choosing">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NarrowReadingPane">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="Reading">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontFamily)" Storyboard.TargetName="NarrowReadingPane">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<FontFamily>Global User Interface</FontFamily>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NarrowList">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

		<Grid x:Name="GridLandscape">

			<Grid.Resources>
				<GridLength x:Key="Column0Width">500</GridLength>
				<Thickness x:Key="ListViewHeaderMargin">15,30,0,0</Thickness>
				<x:Double x:Key="ListViewHeaderFontSize">58</x:Double>
				<x:Double x:Key="ListViewBodyFontSize">32</x:Double>
				<Thickness x:Key="ListViewItemMargin">15,5</Thickness>
				<x:Double x:Key="DocumentHeaderFontSize">48</x:Double>
				<x:Double x:Key="DocumentSubheaderFontSize">32</x:Double>
				<x:Double x:Key="DocumentBodyFontSize">32</x:Double>
				<Thickness x:Key="DocumentMargin">40</Thickness>
			</Grid.Resources>

			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="{StaticResource Column0Width}" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>

			<ListView Background="Gray" ItemsSource="{Binding Documents}" SelectedItem="{Binding Selected, Mode=TwoWay}" Grid.Column="0">
				<ListView.Header>
					<TextBlock FontSize="{StaticResource ListViewHeaderFontSize}" Margin="{StaticResource ListViewHeaderMargin}" FontWeight="Light" Text="Messages" />
				</ListView.Header>
				<ListView.ItemContainerStyle>
					<Style TargetType="ListViewItem">
						<Setter Property="HorizontalContentAlignment" Value="Stretch" />
					</Style>
				</ListView.ItemContainerStyle>
				<ListView.ItemTemplate>
					<DataTemplate>
						<Grid Background="{Binding Brush}">
							<TextBlock Margin="{StaticResource ListViewItemMargin}" Text="{Binding Title}" MaxLines="2" TextWrapping="Wrap" FontSize="{StaticResource ListViewBodyFontSize}" FontWeight="Light" />
						</Grid>
					</DataTemplate>
				</ListView.ItemTemplate>
			</ListView>

			<ScrollViewer Grid.Column="1" Background="White">
				<StackPanel RequestedTheme="Light" Margin="{StaticResource DocumentMargin}">
					<Grid Opacity=".5">
						<TextBlock Text="By Jerry Nixon" TextWrapping="Wrap" Foreground="DimGray" FontSize="{StaticResource DocumentSubheaderFontSize}" HorizontalAlignment="Left" FontWeight="Light" />
						<TextBlock  Text="Tuesday, October 28, 2014" TextWrapping="Wrap" Foreground="DimGray" FontSize="{StaticResource DocumentSubheaderFontSize}" HorizontalAlignment="Right" FontWeight="Light" />
					</Grid>
					<TextBlock Text="{Binding Selected.Title}" Margin="0,20,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="DimGray" FontSize="{StaticResource DocumentHeaderFontSize}" />
					<TextBlock Text="{Binding Selected.Content}" Margin="0,20,0,0" FontSize="{StaticResource DocumentBodyFontSize}" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="DimGray" FontWeight="Light" />
				</StackPanel>
			</ScrollViewer>

		</Grid>

		<Grid x:Name="GridPortrait" Visibility="Collapsed">

			<Grid.Resources>
				<GridLength x:Key="Column0Width">250</GridLength>
				<Thickness x:Key="ListViewHeaderMargin">15,15,0,0</Thickness>
				<x:Double x:Key="ListViewHeaderFontSize">32</x:Double>
				<x:Double x:Key="ListViewBodyFontSize">24</x:Double>
				<Thickness x:Key="ListViewItemMargin">15,5</Thickness>
				<x:Double x:Key="DocumentHeaderFontSize">32</x:Double>
				<x:Double x:Key="DocumentSubheaderFontSize">18</x:Double>
				<x:Double x:Key="DocumentBodyFontSize">24</x:Double>
				<Thickness x:Key="DocumentMargin">20,40</Thickness>
			</Grid.Resources>

			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="{StaticResource Column0Width}" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>

			<ListView Background="Gray" ItemsSource="{Binding Documents}" SelectedItem="{Binding Selected, Mode=TwoWay}" Grid.Column="0">
				<ListView.Header>
					<TextBlock FontSize="{StaticResource ListViewHeaderFontSize}" Margin="{StaticResource ListViewHeaderMargin}" FontWeight="Light" Text="Messages" />
				</ListView.Header>
				<ListView.ItemContainerStyle>
					<Style TargetType="ListViewItem">
						<Setter Property="HorizontalContentAlignment" Value="Stretch" />
					</Style>
				</ListView.ItemContainerStyle>
				<ListView.ItemTemplate>
					<DataTemplate>
						<Grid Background="{Binding Brush}">
							<TextBlock Margin="{StaticResource ListViewItemMargin}" Text="{Binding Title}" MaxLines="2" TextWrapping="Wrap" FontSize="{StaticResource ListViewBodyFontSize}" FontWeight="Light" />
						</Grid>
					</DataTemplate>
				</ListView.ItemTemplate>
			</ListView>

			<ScrollViewer Grid.Column="1" Background="White">
				<StackPanel RequestedTheme="Light" Margin="{StaticResource DocumentMargin}">
					<Grid Opacity=".5">
						<TextBlock Text="By Jerry Nixon" TextWrapping="Wrap" Foreground="DimGray" FontSize="{StaticResource DocumentSubheaderFontSize}" HorizontalAlignment="Left" FontWeight="Light" />
						<TextBlock  Text="Tuesday, October 28, 2014" TextWrapping="Wrap" Foreground="DimGray" FontSize="{StaticResource DocumentSubheaderFontSize}" HorizontalAlignment="Right" FontWeight="Light" />
					</Grid>
					<TextBlock Text="{Binding Selected.Title}" Margin="0,20,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="DimGray" FontSize="{StaticResource DocumentHeaderFontSize}" />
					<TextBlock Text="{Binding Selected.Content}" Margin="0,20,0,0" FontSize="{StaticResource DocumentBodyFontSize}" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="DimGray" FontWeight="Light" />
				</StackPanel>
			</ScrollViewer>

		</Grid>

		<Grid x:Name="GridNarrow" Visibility="Collapsed">

			<Grid.Resources>
				<Thickness x:Key="ListViewHeaderMargin">15,30,0,0</Thickness>
				<x:Double x:Key="ListViewHeaderFontSize">58</x:Double>
				<x:Double x:Key="ListViewBodyFontSize">24</x:Double>
				<Thickness x:Key="ListViewItemMargin">15</Thickness>
				<x:Double x:Key="DocumentHeaderFontSize">32</x:Double>
				<x:Double x:Key="DocumentSubheaderFontSize">18</x:Double>
				<x:Double x:Key="DocumentBodyFontSize">24</x:Double>
				<Thickness x:Key="DocumentMargin">20,40</Thickness>
			</Grid.Resources>

			<ListView x:Name="NarrowList" Background="Gray" ItemsSource="{Binding Documents}" SelectedItem="{Binding Selected, Mode=TwoWay}" Grid.Column="0">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="SelectionChanged">
						<Core:GoToStateAction StateName="Reading"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
				<ListView.Header>
					<TextBlock FontSize="{StaticResource ListViewHeaderFontSize}" Margin="{StaticResource ListViewHeaderMargin}" FontWeight="Light" Text="Messages" />
				</ListView.Header>
				<ListView.ItemContainerStyle>
					<Style TargetType="ListViewItem">
						<Setter Property="HorizontalContentAlignment" Value="Stretch" />
					</Style>
				</ListView.ItemContainerStyle>
				<ListView.ItemTemplate>
					<DataTemplate>
						<Grid Background="{Binding Brush}">
							<TextBlock Margin="{StaticResource ListViewItemMargin}" Text="{Binding Title}" MaxLines="2" TextWrapping="Wrap" FontSize="{StaticResource ListViewBodyFontSize}" FontWeight="Light" />
						</Grid>
					</DataTemplate>
				</ListView.ItemTemplate>
			</ListView>

			<ScrollViewer x:Name="NarrowReadingPane" Grid.Column="0" Background="White" RenderTransformOrigin="0.5,0.5">
				<ScrollViewer.RenderTransform>
					<CompositeTransform/>
				</ScrollViewer.RenderTransform>
				<StackPanel RequestedTheme="Light" Margin="{StaticResource DocumentMargin}">

					<Grid Opacity=".5">
						<Button Style="{StaticResource NavigationBackButtonSmallStyle}" >
							<Interactivity:Interaction.Behaviors>
								<Core:EventTriggerBehavior EventName="Click">
									<Core:GoToStateAction StateName="Choosing"/>
								</Core:EventTriggerBehavior>
							</Interactivity:Interaction.Behaviors>
						</Button>
						<StackPanel >
							<TextBlock Text="By Jerry Nixon" TextWrapping="Wrap" Foreground="DimGray" FontSize="{StaticResource DocumentSubheaderFontSize}" HorizontalAlignment="Right" FontWeight="Light" />
							<TextBlock Text="Tuesday, October 28, 2014" TextWrapping="Wrap" Foreground="DimGray" FontSize="{StaticResource DocumentSubheaderFontSize}" HorizontalAlignment="Right" FontWeight="Light" />
						</StackPanel>
					</Grid>
					<TextBlock Text="{Binding Selected.Title}" Margin="0,20,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="DimGray" FontSize="{StaticResource DocumentHeaderFontSize}" />
					<TextBlock Text="{Binding Selected.Content}" Margin="0,20,0,0" FontSize="{StaticResource DocumentBodyFontSize}" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="DimGray" FontWeight="Light" />
				</StackPanel>
			</ScrollViewer>

		</Grid>

	</Grid>
</Page>
